<template>
    <!-- 点赞 -->
    <svg v-if="is" @click="(event) => setMusicLike(event, id, false)" t="1704894272622" class="icon" viewBox="0 0 1024 1024"
        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9103" width="20" height="20">
        <path
            d="M701.043712 160.211968l-4.762624 0.033792c-78.49984 1.068032-149.940224 38.866944-196.084736 102.475776-47.26784-61.662208-118.856704-97.693696-198.571008-97.693696l-0.033792 0c-62.820352 0.254976-122.550272 25.918464-168.105984 72.269824-50.51904 51.344384-78.94528 124.089344-77.968384 199.576576 0.406528 28.40576 4.835328 55.983104 12.833792 80.303104 15.60576 68.626432 104.973312 165.66272 273.278976 296.701952C386.74432 848.774144 455.20896 896.352256 484.438016 916.6848c6.693888 4.6336 11.216896 7.758848 12.703744 8.86272 0.828416 0.661504 1.750016 1.26976 2.686976 1.804288 2.809856 1.540096 5.899264 2.294784 8.989696 2.294784 3.492864 0 6.948864-0.955392 10.000384-2.907136 38.460416-24.428544 90.412032-63.56992 154.335232-116.317184 162.05824-132.729856 251.278336-235.0592 264.73472-302.454784 7.779328-26.32704 11.52512-54.011904 11.196416-82.310144C947.2256 279.303168 835.926016 160.211968 701.043712 160.211968z"
            fill="#ff0000" p-id="9104"></path>
    </svg>
    <!-- 未点赞 -->
    <svg v-else @click="(event) => setMusicLike(event, id, true)" t="1704894210138" class="icon" viewBox="0 0 1024 1024"
        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8953" width="20" height="20">
        <path
            d="M70.89152 439.768064c0.411648 28.749824 4.902912 57.182208 12.997632 82.342912 8.940544 37.285888 35.329024 79.34976 80.617472 128.520192 43.143168 46.841856 102.803456 99.733504 182.388736 161.697792l0.083968 0.065536c41.634816 32.202752 104.728576 76.089344 131.67104 94.830592l2.29888 1.594368c3.987456 2.760704 8.102912 5.609472 9.385984 6.532096 1.866752 1.434624 3.88608 2.774016 6.013952 3.989504l0.50688 0.283648c7.40864 4.062208 15.801344 6.209536 24.2688 6.209536 9.629696 0 18.989056-2.725888 27.07456-7.882752 36.589568-23.2448 85.445632-60.034048 145.217536-109.353984C849.652736 680.629248 933.004288 583.811072 948.11136 512.73728c7.806976-26.930176 11.593728-55.233536 11.257856-84.185088C957.428736 275.802112 840.152064 151.53152 697.93792 151.53152l-4.83328 0.034816c-68.908032 0.937984-132.866048 28.562432-180.608 76.995584-48.567296-46.546944-112.991232-72.600576-181.983232-72.600576l-0.135168 0c-66.758656 0.270336-130.054144 27.413504-178.214912 76.412928C99.501056 285.897728 69.878784 361.472 70.89152 439.768064zM330.601472 222.521344c31.11936 0.008192 60.624896 6.806528 87.697408 20.207616 26.81856 13.275136 49.859584 32.324608 68.484096 56.620032l27.148288 35.41504 26.202112-36.119552c36.499456-50.313216 92.544-79.657984 153.776128-80.523264l4.132864-0.029696c105.931776 0.058368 193.294336 94.826496 194.772992 211.269632 0.264192 22.759424-2.742272 44.929024-8.937472 65.893376l-0.425984 1.440768-0.294912 1.473536c-6.150144 30.803968-44.464128 105.409536-231.959552 258.972672l-0.094208 0.077824c-52.785152 43.556864-96.318464 76.71296-129.60256 98.71872-0.81408-0.564224-1.700864-1.1776-2.665472-1.845248l-2.173952-1.508352c-26.520576-18.44736-88.619008-61.642752-128.923648-92.813312-75.573248-58.842112-134.208512-110.73536-174.26944-154.231808-46.483456-50.46784-61.026304-82.107392-65.040384-99.761152l-0.347136-1.528832-0.490496-1.48992c-6.310912-19.188736-9.818112-41.299968-10.141696-63.8976-0.784384-60.609536 21.87264-118.85568 62.175232-159.816704C235.239424 242.804736 281.752576 222.732288 330.601472 222.521344z"
            fill="#ccc" p-id="8954"></path>
    </svg>
</template>

<script setup lang="ts">
import { defineProps, toRefs } from 'vue'
import { getMusicLike } from '../api/music/index'
import useCounterStore from '../stores/counter'
import { ElMessage } from 'element-plus'
const { musicLikeListId } = toRefs(useCounterStore())
defineProps({
    // 定义属性id，类型为Number，默认值为空字符串
    id: {
        type: Number,
        default: ""
    },
    // 定义属性is，类型为Boolean，默认值为false
    is: {
        type: Boolean,
        default: false
    }
})

// 设置音乐收藏状态
const setMusicLike = async (event: HTMLElementEventMap['click'], id: number, like: boolean) => {
    event.stopPropagation()//阻止冒泡
    const data = await getMusicLike({ id, like })//获取接口数据
    if (data.code === "success") {
        if (like) {
            // 添加到收藏列表
            musicLikeListId.value.push(id)
            ElMessage({
                type: 'success',
                message: '已添加到“我喜欢的音乐”',
            })
        } else {
            // 从收藏列表中删除
            musicLikeListId.value.splice(musicLikeListId.value.indexOf(id), 1)
            ElMessage({
                message: '取消收藏成功',
            })
        }
    }
}
</script>

<style lang="scss" scoped>
svg {
    cursor: pointer;
}

.el-message {
    background: red;
}
</style>